<template>
  <div class="recentWeather wrap">
    <div id="main">
      <ul class="weather-day">
        <li class="day-item" v-for="item in weatherForecast" :key="item.date">
          <div>星期 {{ item.week }}</div>
          <div>{{ item.date }}</div>
          <div>{{ item.dayweather }}</div>
          <div>风力{{ item.daypower }}级</div>
        </li>
      </ul>
      <div class="weather-chart">
        <v-chart class="chart" :option="option"></v-chart>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getAdcodeApi, getCityApi, getWeatherForecastApi } from '@/api/weather'

// ========================
const ipCity = ref({})
const adCode = ref(0)
const weatherForecast = ref([])
onMounted(async () => {
  // 更新城市对象
  ipCity.value = await getCityApi()
  // 根据当前城市名字更新城市code
  const codeRes = await getAdcodeApi(ipCity.value.city)
  adCode.value = codeRes.geocodes[0].adcode
  // 根据城市code获取天气预报数组
  const forecastRes = await getWeatherForecastApi(adCode.value)
  weatherForecast.value = forecastRes.forecasts[0].casts
  // console.log(weatherForecast.value)
})
// =========================
const option = ref({
  grid: {
    left: '10%',
    right: '5%',
    top: '30%',
    bottom: '5%',
    width: '80%',
    containLabel: true,
  },
  xAxis: {
    show: false,
    type: 'category',
    data: ['第一天', '第二天', '第三天', '第四天'],
    axisLine: {
      lineStyle: {
        width: 2, // 设置 x 轴轴线的宽度，可以在视觉上影响长度感知
      },
    },
  },
  yAxis: {
    type: 'value',
    show: false,
  },
  series: [
    {
      show: true,
      name: '白天', //图例对应的名字
      type: 'line', //图形类型
      data: weatherForecast.value.map(item => item.daytemp),
    },
    {
      show: true,
      name: '夜间',
      type: 'line',
      data: weatherForecast.value.map(item => item.nighttemp),
    },
  ],
})
</script>
<style lang="scss" scoped>
@import '../assets/main.scss';
.recentWeather {
  color: $text-color;
  #main {
    // height: 400px;
    background-color: $box-color;
    padding: 40px 48px;
    .weather-day {
      display: flex;
      justify-content: space-between;
      height: 200px;
      gap: 10px;
      li {
        display: flex;
        height: 100%;
        width: 20%;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        // background-color: green;
      }
    }
    .weather-chart {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      .chart {
        width: 800px;
        height: 200px;
      }
    }
  }
}
</style>
